<template>
  <a-space wrap>
    <div>
      <a-button type="primary" ghost @click="modelValueObj.showConfirmButtonModelValue = true">1.不显示确定按钮</a-button>
      <AsyncModal v-model:open="modelValueObj.showConfirmButtonModelValue" :showConfirmButton="false">
        <p>不显示确定按钮</p>
      </AsyncModal>
    </div>
    <div>
      <a-button type="primary" ghost @click="modelValueObj.contentModelValue = true">2.内容区域滚动条</a-button>
      <AsyncModal v-model:open="modelValueObj.contentModelValue" @ok="ok">
        <div class="more-content">内容很多</div>
      </AsyncModal>
    </div>
    <div>
      <a-button type="primary" ghost @click="add">3.可拖拽移动</a-button>
      <AsyncModal v-model:open="modelValueObj.draggableModelValue" :draggable="true" @ok="ok">
        <p>可拖拽移动</p>
      </AsyncModal>
    </div>
    <div>
      <a-button type="primary" ghost @click="modelValueObj.confirmLoadingModelValue = true">4.手动控制确定按钮loading</a-button>
      <AsyncModal v-model:open="modelValueObj.confirmLoadingModelValue" :confirmLoading="confirmLoading" @ok="onConfirmLoading">
        <p>props传递confirmLoading属性可以手动控制确定按钮loading状态</p>
        <p>例如:提交表单</p>
      </AsyncModal>
    </div>
    <div>
      <a-button type="primary" ghost @click="modelValueObj.autoConfirmLoadingModelValue = true">5.自动(异步)控制确定按钮loading</a-button>
      <AsyncModal v-model:open="modelValueObj.autoConfirmLoadingModelValue" @ok="callBack => autoConfirmLoading(callBack, '可以传其他自定参数')">
        <p>调用onConfirm形参函数传入一个Promise,会自动调整确定按钮的loading状态</p>
        <p>例如:提交表单</p>
      </AsyncModal>
    </div>
    <div>
      <a-button type="primary" ghost @click="modelValueObj.destroyOnCloseModelValue = true">6.在窗口关闭时销毁内容</a-button>
      <AsyncModal v-model:open="modelValueObj.destroyOnCloseModelValue" destroyOnClose @ok="ok">
        <p>在窗口关闭时销毁内容</p>
        <a-input></a-input>
      </AsyncModal>
    </div>
    <div></div>
    <div></div>
  </a-space>
</template>

<script setup lang="ts">
defineOptions({
  name: 'CustomModel'
})
import { reactive, ref } from 'vue'
import { loadingPromise } from '@/utils/tools'
import AsyncModal from '_c/AsyncModal/index.vue'

const modelValueObj = reactive({
  showConfirmButtonModelValue: false,
  contentModelValue: false,
  draggableModelValue: false,
  confirmLoadingModelValue: false,
  autoConfirmLoadingModelValue: false,
  destroyOnCloseModelValue: false
})
const ok = () => {
  Object.keys(modelValueObj).map(item => {
    modelValueObj[item as keyof typeof modelValueObj] = false
  })
}

// 示例4：
const confirmLoading = ref(false)
const onConfirmLoading = async () => {
  confirmLoading.value = true
  await loadingPromise([1500, 2000, 2500])
  confirmLoading.value = false
  modelValueObj.confirmLoadingModelValue = false
}


const add =()=>{
  modelValueObj.draggableModelValue = true
}
/**
 * 示例5: 模拟网络请求等Promise异步操作
 * 由于emit无法获取函数返回值，所以这里通过emit调用自定义函数后会传出一个callBack函数，
 * 通过调用callBack传入一个Promise，组件会根据Promise状态控制按钮的loading状态
 */
const autoConfirmLoading = async (callBack: any, otherParams: any) => {
  let res: Function
  // 创建Promise模拟网络请求
  const confirmPromise = new Promise<void>((resolve, reject) => {
    res = resolve
  })
  /**
   *  将Promise传入callBack函数
   */
  callBack(confirmPromise)
  // 模拟网络请求返回结果
  setTimeout(() => {
    res()
    modelValueObj.autoConfirmLoadingModelValue = false
  }, 2000)
}
</script>

<style scoped>
.more-content {
  height: 900px;
}
</style>
